<template>
  <div class="echart-part">

        <div class="echart-title">{{para.title}}</div>

        <div :id="para.id" class="echart_content"></div>

  </div>
</template>
<script>
  const echarts = require('echarts')
  import statService from '@/api/stat/stat'
  let x0 = 5
  let y0 = 5
  let sx = 5
  let sy = 2
  let TOAUDIT = '待审批'
  let REJECT = '已驳回'
  let TOEXP = '待打包'
  let EXP = '已打包'
  let RECEIVE = '已导入'

  let option = {
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(27,56,63,1)', // 分割线颜色
          type: 'dashed',
          width: 1.5
        }
      },
      axisTick: {show: false},
      axisLine: {show: false},
      axisLabel: {show: false}
    },
    xAxis: {
      type: 'category',
      axisLine: {show: false},
      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        show: true,
        color:'rgba(120,199,236,1)'
      },
      splitLine: {
        show: false
      }
    },
    series: {
      type: 'line',
      label: {
        show:true,
        position:'top',
        color:'rgba(120,199,236,1)'
      },
      lineStyle:{
        color:'rgba(33,245,241,1)'
      },
      itemStyle:{
        color:'rgba(240,174,45,1)',
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: "rgba(6,226,253,0.2)"
        }, {
          offset: 1,
          color: "rgba(7,23,30,0.35)"
        }])
      },
      data: [],
      effect: {
        constantSpeed: 20,
        show: true,
        trailLength: 0.1,
        symbolSize: 1.5
      },
    }
  }
  let myChart
  export default {
    name: 'mail-state-data',
    components: {},
    props: {
      para: {}
    },
    data () {
      return {
        option: option,
        reload: false,
        new: [],
        dataState: [],
        legend: [],
        timer: "",
      }
    },
    watch: {
      reload (value) {
        if (value) {
          this.option.series.data = _.map(this.dataState, 'value')
          let xnameArr = _.map(this.dataState, 'name')
          this.option.xAxis.data = xnameArr
          this.draw()
        } else {
          return
        }
      }
    },
    mounted () {
      this.getData()
    },
    beforeDestroy () {
      if (this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
        clearInterval(this.timer) //关闭
      }
    },
    methods: {
      getData () {
        this.reload = false
        this.dataState = [];
        statService.queryMailStatusCount().then(res => {
          if (res.success) {
            res.data.forEach(item => {
              let name
              switch (parseInt(item.status)) {
                case 1:
                  name = REJECT
                  // x = x0
                  // y = y0
                  break
                case 2:
                  name = TOAUDIT
                  // x = x0+1.2
                  // y = y0
                  break
                case 3:
                  name = TOEXP
                  // x = x0+sx
                  // y = y0
                  break
                case 4:
                  name = EXP
                  // x = x0 + sx
                  // y = y0 + sy
                  break
                case 5:
                  name = RECEIVE
                  // x = x0 + 1.2
                  // y = y0 + sy
                  break
              }
              if (name) {
                this.dataState.push({
                  name: name,
                  value: item.count,
                  // x:x,
                  // y:y
                })
              }
              this.reload = true
            })
          }
        }).catch((err) => console.log(err))
      },


      draw () {
        let div = document.getElementById(this.para.id)
        if (!myChart || !div.innerHTML) {
          myChart = echarts.init(document.getElementById(this.para.id))
        }
        myChart.setOption(this.option)
      }
    }
  }
</script>

<style scoped>
  .echart-title {
    display: flex;
    align-items: center;
    padding-left: 0.6rem;
    height: 0.5rem;
    background: url("../../../assets/images/large-screen/neirong_ng.svg") no-repeat;
    background-size: 100%;
  }

  .echart-title:before {
    content: url("../../../assets/images/large-screen/juxing.svg");
    position: absolute;
    left: 0.3rem;
    top: auto;
  }

  .echart_content{
    /*background: url("../../../assets/images/large-screen/kuangwang.svg") no-repeat;*/
    background-size: 100% 100%;
    background-color: rgba(7,23,30,0.5);

  }
</style>
